<template>
<div class="container">
    <div class="page-head">
        <div class="left">
            <el-form :inline="true" :model="query" @submit.native.prevent>
                <el-form-item>
                    <el-button type="danger" @click="showCreateView">添加</el-button>
                </el-form-item>
                <el-form-item>
                    <source-picker-view ref="sourcePickerRef" type="source" :checkStrictly="true" v-model="query.source_id" placeholder="请选择渠道"></source-picker-view>
                </el-form-item>
                <el-form-item>
                     <el-date-picker v-model="query.range" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
                        </el-date-picker>
                </el-form-item>
                <el-button type="primary" native-type="submit" @click="doSearch">搜索</el-button>
            </el-form>
        </div>
    </div>

    <el-table ref="tableView" height="tableHeight" class="page-body" v-loading="loading" :data="tableData" border @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center" width="120">
            <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="showEditView(scope.row)">查看</el-button>
            </template>
        </el-table-column>
        <el-table-column label="品牌" prop="brand.title"></el-table-column>
        <el-table-column label="渠道/账号" prop="source.title"></el-table-column>
        <el-table-column label="花费日期" prop="cost_date"></el-table-column>
        <el-table-column label="花费金额" prop="cost"></el-table-column>
        <el-table-column label="创建人" prop="user.realname"></el-table-column>
        <el-table-column label="创建时间" prop="create_time"></el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="page-foot">
        <div class="left"></div>
        <div class="right">
            <common-pagination :total="pg.total" :page.sync="pg.page" :limit.sync="pg.limit" @getList="getTableData"></common-pagination>
        </div>
    </div>

    <edit-view ref="editViewRef" @refresh="getTableData"></edit-view>
</div>
</template>

<script>
import {
    getCostListApi,
    deleteCostApi,
} from "@/api/customer/cost.js";
import pagination from "@/components/mixins/pagination.vue";
import sourcePickerView from "@/components/picker/source.vue";
import editView from "./components/edit.vue";

export default {
    provide() {
        return {
            pageIndex: this
        };
    },
    components: {
        sourcePickerView,
        editView,
    },
    mixins: [pagination],
    data() {
        return {
            query: {
                source_id: "",
                range: "",
            },
            isSearch: false,
            loading: false,
            tableData: [],
        };
    },
    created() {
        this.getTableData();
    },
    methods: {
        doSearch() {
            this.isSearch = true;
            this.resetPg();
            this.getTableData();
        },
        getTableData() {
            let params = Object.assign({}, this.query);
            params["pagination"] = this.pg;
            this.loading = true;
            getCostListApi(params).then(res => {
                this.loading = false;
                this.tableData = res.data.list;
                this.setPg(res);
            });
        },
        resetSearch() {
            this.query = {
                source_id: "",
                range: "",
            };
            this.isSearch = false;
        },
        // 添加客资
        showCreateView() {
            this.$refs.editViewRef.showDrawer();
        },
        // 编辑客资
        showEditView(row) {
            this.$refs.editViewRef.showDrawer(row);
        },
    },
};
</script>

<style lang="scss" scoped>
.table-list {
    .customer-tag {
        margin-right: 5px;
    }
}

.bottom-box {
    display: flex;
    justify-content: center;
    align-items: center;

    .funcs-box {
        flex: 1;
        text-align: left;

        .func-item {
            margin-right: 8px;
        }
    }

    .pagination-box {
        flex: 1;
        text-align: right;
    }
}
</style>
